<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title th:text="${wbeParameter.name}">登陆</title>
    <link rel="stylesheet" href="/resource/common/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/resource/css/login.css">
</head>
<body>


<!-- LoginForm -->
<div class="login">
    <div class="center layui-row layui-form">
        <h1 class="title" style="border-bottom: solid 1px #0000001a ;margin-bottom: 10px"
            th:text="${wbeParameter.name}"></h1>
        <div class="inputLi">
            <strong>账户</strong>
            <input type="text" placeholder="请输入" name="userName" lay-verify="required|userName" class="layui-input">
        </div>
        <div class="inputLi">
            <strong>密码</strong>
            <input type="text" placeholder="请输入" name="password" lay-verify="required|pass" class="layui-input">
        </div>
        <div class="inputLi layui-row">
            <strong class="layui-col-md2">验证码</strong>
            <div class="layui-col-md6">
                <input type="text" placeholder="请输入" name="vercode" lay-verify="required|vercodes" class="layui-input">
            </div>
            <div class="layui-col-md4 layui-row" style="margin-top: 9px;margin-left: 4px">
                <i class="layui-icon layui-icon-vercode layui-col-md3"></i>
                <div class="zyl_lofo_vercode zylVerCode layui-col-md9" id="discode" onclick="createCode()"
                     style="cursor:pointer;"></div>
            </div>

        </div>
        <div class="inputLi">
            <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="demo1">立即登录</button>
        </div>
        <!-- <p class="tip"><a href="/reg" style="color: #5492dc">注册</a></p>-->
    </div>
</div>
<!-- LoginForm End -->


<!-- Jquery Js -->
<script src="/resource/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<!-- Layui Js -->
<script type="text/javascript" src="/resource/common/layui/layui.js"></script>

<script>
    layui.use(['carousel', 'form'], function () {
        var carousel = layui.carousel
            , form = layui.form;

        //自定义验证规则
        form.verify({
            userName: function (value) {
                if (value.length < 5) {
                    return '账号至少得5个字符';
                }
            }
            , pass: [/^[\S]{1,12}$/, '密码必须6到12位，且不能出现空格']
            , vercodes: function (value) {
                //获取验证码
                var zylVerCode = $(".zylVerCode").html();
                if (value != zylVerCode) {
                    return '验证码错误!';
                }
            }
            , content: function (value) {
                layedit.sync(editIndex);
            }
        });

        //监听提交
        form.on('submit(demo1)', function (data) {
            $.ajax({
                url: '/login.do',
                type: 'post',
                dataType: 'json',
                data: data.field,
                async: false,
                success: function (result) {
                    console.log(result)
                    if (result.status) {
                        location.href = "/indexWbe";
                    } else {
                        layer.msg(result.msg, {time: 2000});
                    }
                }

            });
        });
    });
</script>
<!--验证码-->
<script language="javascript">
    var code; //在全局 定义验证码
    $(function () {
        createCode()
    })

    function createCode() { //创建验证码函数
        code = "";
        var codeLength = 4;//验证码的长度
        var selectChar = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k',
            'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z');//所有候选组成验证码的字符，当然也可以用中文的
        for (var i = 0; i < codeLength; i++) {
            var charIndex = Math.floor(Math.random() * 36);
            code += selectChar[charIndex];
        }
// 设置验证码的显示样式，并显示
        document.getElementById("discode").style.fontFamily = "Fixedsys"; //设置字体
        document.getElementById("discode").style.letterSpacing = "5px"; //字体间距
        document.getElementById("discode").style.color = "#5492dc"; //字体颜色
        document.getElementById("discode").innerHTML = code; // 显示
    }

</script>

</body>
</html>
